<template>
  <el-container>
    <el-container>
      <el-main>
        <div class="function_box">
          <span>
            <el-button class="el-button--primary" @click="handleAdd">新增</el-button>
            <!--<el-button class="el-button&#45;&#45;primary">导入</el-button>-->
            <!--<el-button class="el-button&#45;&#45;primary">导出</el-button>-->
          </span>
          <span>
            <el-select filterable v-model="selectClass" placeholder="请选择班级" clearable>
              <el-option v-for="item in classes" :value="item.id" :key="item.name" :label="item.name"></el-option>
            </el-select>
            <el-select filterable v-model="selectCourse" placeholder="请选择课程" clearable>
              <el-option v-for="item in courses" :value="item.id" :key="item.name" :label="item.name"></el-option>
            </el-select>
            <el-select filterable v-model="selectTeacher" placeholder="请选择老师" clearable>
              <el-option v-for="item in teachers" :value="item.id" :key="item.name" :label="item.name"></el-option>
            </el-select>
            <el-select filterable v-model="selectClassroom" placeholder="请选择教室" clearable>
              <el-option v-for="item in classrooms" :value="item.id" :key="item.name" :label="item.name"></el-option>
            </el-select>
            <el-select filterable v-model="selectYear" placeholder="请选择学年" clearable>
              <el-option v-for="item in yearData" :value="item" :key="item" :label="item"></el-option>
            </el-select>
            <el-button style="margin-left: 5px" class="el-button--primary" @click="handleSearch">搜索</el-button>
          </span>
        </div>
        <!--表格区域--begin-->
        <el-table
            v-loading="loading"
            :data="tableData"
            border
            stripe
            style="width: 100%">
          <el-table-column
              show-overflow-tooltip
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="classId"
              label="班级"
              width="180"
              sortable>
            <template slot-scope="scope">
              <el-tag effect="plain" type="info" disable-transitions>
                {{scope.row.class.name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="classroomId"
              label="教室"
              width="100">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.classroom.name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="courseId"
              label="课程"
              width="130">
            <template slot-scope="scope">
              <el-tag type="danger" disable-transitions>
                {{scope.row.course.name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="teacherId"
              label="老师"
              width="100">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.teacher.name}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="weeks"
              label="周次">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.weeks}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="weeks"
              label="星期">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.week}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="time"
              label="时间">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.time}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="year"
              label="学年"
              width="90">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>
                {{scope.row.year}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="medium" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm style="margin-left: 10px" title="确定删除吗？" @confirm="handleDelete(scope.row)">
                <el-button size="medium" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格区域--end-->
        <!--分页区域--begin-->
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
        <!--分页区域--end-->
        <!--弹窗区域--begin-->
        <el-dialog
            title="新增课表"
            :visible.sync="dialogVisible"
            width="50%">
          <el-form ref="form" :model="form" label-width="225px">
            <span style="display: inline-flex">
              <el-form-item label="课程名称">
              <el-select v-model="form.courseId" placeholder="请选择课程" required :disabled="isUpdate">
                <el-option v-for="item in courses" :label="item.name" :value="item.id" :key="item.name"></el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="上课老师">
                <el-select v-model="form.teacherId" placeholder="请选择教师" required :disabled="isUpdate">
                  <el-option v-for="item in teachers" :label="item.name" :value="item.id" :key="item.name"></el-option>
                </el-select>
              </el-form-item>
            </span>

            <span style="display: inline-flex">
              <el-form-item label="上课班级">
              <el-select v-model="form.classId" placeholder="请选择班级" required :disabled="isUpdate">
                <el-option v-for="item in classes" :label="item.name" :value="item.id" :key="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上课教室">
              <el-select v-model="form.classroomId" placeholder="请选择教室" required :disabled="isUpdate">
                <el-option v-for="item in classrooms" :label="item.name" :value="item.id" :key="item.name"></el-option>
              </el-select>
            </el-form-item>
            </span>

            <span style="display: inline-flex">
              <el-form-item label="课程学年">
                <el-select v-model="year" placeholder="请选择学年" required :disabled="isUpdate">
                  <el-option v-for="item in yearData" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="锁定学年">
                <el-select v-model="lockYear" placeholder="请选择学年" required :disabled="isUpdate">
                  <el-option value="是">是</el-option>
                  <el-option value="否">否</el-option>
                </el-select>
              </el-form-item>
            </span>

            <el-form-item label="上课星期">
              <el-checkbox-group v-model="week">
                <el-checkbox v-for="item in weekData" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="上课时间">
              <el-checkbox-group v-model="time">
                <el-checkbox v-for="item in timeData" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="课程周次">
              <el-checkbox-group v-model="weeks">
                <el-checkbox v-for="item in weeksData" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <div style="text-align: center">
              <el-button-group>
                <el-button @click="handleNoSelect">不选</el-button>
                <el-button @click="handleSelectSingle">单周</el-button>
                <el-button @click="handleSelectDouble">双周</el-button>
                <el-button @click="handleSelectAll">全选</el-button>
              </el-button-group>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <!--弹窗区域--end-->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {addTimetable, deleteTimetable, selectTimetable, updateTimetable} from "@/api/timetable";
import {selectAllClassroom} from "@/api/classroom";
import {selectAllCourse} from "@/api/course";
import {selectAllTeacher} from "@/api/teacher";
import {selectAllClasses} from "@/api/class";

export default {
  name: "TimetableManager",
  data(){
    return{
      courses: [],
      teachers: [],
      classes: [],
      classrooms: [],
      weekData: ['星期一','星期二','星期三','星期四','星期五'],
      timeData: ['08:00-08:45','08:55-09:40','09:55-10:40','10:50-11:35','13:50-14:35','14:45-15:30','15:40-16:20','16:20-17:00'],
      yearData: ['2022-1','2022-2','2023-1','2023-2','2024-1','2024-2','2025-1','2025-2'],
      weeksData: 20,
      tableData: [],
      total: 0,
      dialogVisible: false,
      form: {},
      pageSize: 10,
      currentPage: 1,
      loading: true,
      lockYear: '否',
      year: '',
      weeks: [],
      week: [],
      time: [],
      isUpdate: true,
      selectYear: '',
      selectClassroom: '',
      selectTeacher: '',
      selectCourse: '',
      selectClass: ''
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      selectTimetable({pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}).then(res => {
        this.tableData = res.data.records;
        console.log(this.tableData);
        this.total = res.data.total;
        this.pageSizes = res.data.size;
        this.loading = false;
      });
      selectAllClassroom().then(res => {
        this.classrooms = res.data;
      });
      selectAllCourse().then(res => {
        this.courses = res.data;
      });
      selectAllTeacher().then(res => {
        this.teachers = res.data;
      });
      selectAllClasses().then(res => {
        this.classes = res.data;
      });
    },
    handleEdit(row){
      this.isUpdate = true;
      this.dialogVisible = true;
      this.form.classId = JSON.parse(JSON.stringify(row)).class.id;
      this.form.classroomId = JSON.parse(JSON.stringify(row)).classroom.id;
      this.form.teacherId = JSON.parse(JSON.stringify(row)).teacher.id;
      this.form.courseId = JSON.parse(JSON.stringify(row)).course.id;
      this.weeks = JSON.parse(JSON.stringify(row)).weeks;
      this.week = JSON.parse(JSON.stringify(row)).week;
      this.time = JSON.parse(JSON.stringify(row)).time;
      this.year = JSON.parse(JSON.stringify(row)).year;
    },
    handleDelete(row){
      console.log(row)
      deleteTimetable(row).then(res => {
        if (res.code===0){
          this.$message.success(res.message);
          this.load();
        }else {
          this.$message.error(res.message);
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      this.currentPage = pageNum;
      this.load();
    },
    handleSubmit(){
      this.form.weeks = this.weeks;
      this.form.week = this.week;
      this.form.time = this.time;
      this.form.year = this.year;
      if (this.weeks.length===0||
          this.week.length===0||
          this.time.length===0||
          this.year===''||
          this.form.courseId===undefined||
          this.form.teacherId===undefined||
          this.form.classId===undefined||
          this.form.classroomId===undefined){
        this.$message.info("表单未填写完整");
        return;
      }
      if (this.isUpdate){//修改
        console.log("修改")
        console.log(this.form)
        updateTimetable(this.form).then(res =>{
          if (res.code===0){
            this.$message.success(res.message);
            this.load();
          }else {
            this.$message.error(res.message);
          }
        }).catch(res => {
          this.$message.error(res.code);
        })
      }else {//新增
        console.log("新增")
        addTimetable(this.form).then(res =>{
          if (res.code===0){
            this.$message.success(res.message);
            this.load();
          }else {
            this.$message.error(res.message);
          }
        }).catch(res => {
          this.$message.error(res.code);
        })
      }
      this.dialogVisible = false;
    },
    handleAdd(){
      this.weeks = [];
      this.week = [];
      this.time = [];
      if (this.lockYear==='否'){
        this.year = '';
      }
      this.form={};
      this.dialogVisible = true;
      this.isUpdate = false;
    },
    handleSearch(){
      selectTimetable({pageNum: this.currentPage,
        pageSize: this.pageSize,
        year: this.selectYear,
        classroomId: this.selectClassroom,
        courseId: this.selectCourse,
        classId: this.selectClass,
        teacherId: this.selectTeacher}).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.pageSizes = res.data.size;
      })
    },
    handleSelectAll(){
      for (let i = 1; i <= this.weeksData; i++) {
        this.weeks.push(i);
      }
    },
    handleNoSelect(){
      this.weeks = [];
    },
    handleSelectSingle(){
      this.weeks = [];
      for (let i = 1; i <= this.weeksData; i++) {
        if (i%2!==0){
          this.weeks.push(i);
        }
      }
    },
    handleSelectDouble(){
      this.weeks = [];
      for (let i = 1; i <= this.weeksData; i++) {
        if (i%2===0){
          this.weeks.push(i);
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-main{
  .function_box{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>